import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Button,
    TextInput,
    FlatList,
    RefreshControl,
    ActivityIndicator,
    Alert,
    AsyncStorage,
    TouchableOpacity,
    Image,
    Modal,
    DeviceInfo
} from 'react-native';
import PropTypes from 'prop-types';

export default class MenuDialog extends Component {
    state = {
      visible:false
    };
    // 打开弹窗
    show(){
        this.setState({
            visible:true
        })
    };
    // 关闭弹窗
    dismiss(){
        this.setState({
            visible:false
        })
    };
    componentDidMount(){
        //console.log('menus', this.props.menus);
    }
    render(){
        /**
         * onColse 关闭弹窗的回调函数
         * menus 内容
         * onSelect 点击相对应的item的回调函数
         * theme 用户自定义主题
         */
        const {onClose, menus, onSelect, theme} = this.props;
        return (
            <Modal
                transparent={true}
                visible={this.state.visible}
                onRequestClose={()=>onClose()}
            >
            <TouchableOpacity
                style={styles.container}
                onPress={()=>this.dismiss()}
            >
                <Image
                    source={require('../res/images/arrow_top.png')}
                    style={styles.arrow}
                />
                <View
                    style={styles.content}
                >
                    {
                        menus.map((item, index, arr)=>{
                            return <TouchableOpacity
                                key={index}
                                onPress={()=>{
                                    onSelect(item)
                                }}
                                underlayColor={'transparent'}
                            >
                                <View style={{alignItems: 'center',flexDirection: 'row'}}>
                                    <Image
                                        source={item.icon}
                                        resizeMode={'stretch'}
                                        style={[styles.icon]}
                                    />
                                    <Text
                                        style={styles.text}
                                    >
                                        {item.name}
                                    </Text>
                                    {
                                        index !== menus.length-1 ? <View
                                            style={styles.line}
                                        /> : null
                                    }
                                </View>
                            </TouchableOpacity>
                        })
                    }
                </View>
            </TouchableOpacity>
            </Modal>
        )
    }
}
MenuDialog.PropTypes = {
    menus: PropTypes.array.isRequired,
    onSelect: PropTypes.func.isRequired,
    theme: PropTypes.object,
    onClose: PropTypes.func
};
MenuDialog.defaultProps = {
    menus: []
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.6)',
        alignItems:'flex-end'
    },
    arrow: {
        marginTop: 56+ (DeviceInfo.isIPhoneX_deprecated ? 24 : 0),
        width: 16,
        height: 6,
        marginRight:18,
        resizeMode: 'contain'
    },
    text: {
        fontSize: 16,
        color: 'black',
        fontWeight: '400',
        paddingRight: 15
    },
    line: {
        height: 0.3,
        backgroundColor: 'darkgray'
    },
    icon: {
        width: 16,
        height: 16,
        margin: 10,
        marginLeft: 15,
        tintColor: "#2196f3"
    },
    content: {
        backgroundColor: 'white',
        borderRadius: 3,
        paddingTop: 3,
        paddingBottom: 3,
        marginRight: 3
    }
})

